<template>
    <div>
        <h1>成本管理页面</h1>
<!-- ------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------ -->
 <!--  -->
        <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float:right" type="primary" @click="SelectData()" size="small">查询搜索</el-button>
        <el-button style="float:right;margin-right: 15px" @click="handleResetSearch()" size="small">重置</el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="">
            <el-select v-model="value" placeholder="请选择查询内容">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> 
                </el-option>
            </el-select>
            <el-date-picker style="margin-left:5px" value-format="yyyy-MM-dd" @change="getSTime" v-model="value1" format="yyyy-MM-dd" type="date" placeholder="请选择日期"></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!--  -->
    <!-- <button @click="nn">111111111</button> -->
<!-- ------------------------------------------------------------------ -->
    </div>
</template>
<script>
import { mapActions } from "vuex";
import http from "../../http/http";
export default {
    name:'Cost',
     data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
        options:[ //下拉选择组件的data
            {value: '1', label: '查询支出' },
            {value: '2', label: '查询利润' },
        ],
        value: '',
        formInline: {
                value: "",
                value1: ""
            },
      };
    },
    methods:{
        handleResetSearch(){ //------------------------------重置按钮
          let value1 = this.value1 = ''  //------------------------------这个是选择的时间
          let value = this.value = ''
        },
        getSTime(val) {
                this.value1=val;//---------------------这个sTime是在data中声明的，也就是v-model绑定的值
        },
        SelectData(){
          let value1 = this.value1 //------------------------------这个是选择的时间
          let value = this.value
          console.log(value1)
          if(value != '' && value1 != ''){
            if(value == '1'){//------------------------------如果选择查询成本
            http({
              url:'/mgrsite/Account/selectPayPrice',
              method:'post',
              data:{
                  "inputValue": this.value1,
              }
            }).then(res =>{
              console.log(res.data)
               this.$alert(res.data+"元","您查询的当月成本为")
              return res.data
            }).catch(err =>{
              console.log(err)
            })
          }else if((value == '2')){//------------------------------如果选择查询利润
            http({   
              url:'/mgrsite/Account/selectPriceId',
              method:'post',
              data:{
                  "inputValue": this.value1,
              }
            }).then(res =>{
              console.log(res)
              this.$alert(res.data+"元","您查询的当月利润为")
              return res.data
            }).catch(err =>{
              console.log(err)  
            })
          }
          }else{
            this.$confirm("您的查询内容为空！请重新检查后再输入！", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          });
          }  
        },
        
    },
}
</script>
<style scoped lang="less">

</style>